<template>
	<!-- <color-header></color-header> -->
	<view class="header-tab">
		<uni-nav-bar title="See Wow福利券" left-icon="left" status-bar background-color="transparent" :border="false"
		 @clickLeft="$navTo('',{}, 'navigateBack')"></uni-nav-bar>	
		<tab-nav :nav-list="nav" @nav-tap="navTap" :i="idx"></tab-nav>
	</view>
	<view class="clear-float"></view>
	<view class="reward-wrapper"   v-for ="item in rewardList.data"  v-if="rewardList.data.length > 0" :key="item.reward_no">
		<view class="reward-item-default" v-if="status==3 || status ==4" >
			<view class="left-box" >
				<view class="status-tag">{{item.type ==1 ? "优惠券" : "折扣券"}}</view>
				<view class="discount-box">
					<p v-if="item.type ==1" >¥<span class="discount-num">{{item.amount}}</span></p>
					<p v-if="item.type ==2" ><span class="discount-num">{{item.discount/10}}</span>折</p>
					<p class="discount-text">{{item.activity_type ==1 ? "全场通用" : "专属优惠"}}</p>
				</view>
			</view>
			<view class="right-box">
				<p class="title">{{item.title}}</p>
				<p class="sub-title">{{item.sub_title}}</p>
				<p class="time">有效期至{{item.end_time}}</p>
				<view class="btn" >{{item.status==3 ? "已使用" : "已失效"}}</view>
			</view>
		</view> 
		<view class="reward-item"  v-if="status==1 || status ==2" >
			<view class="left-box" >
				<view class="status-tag">{{item.type ==1 ? "优惠券" : "折扣券"}}</view>
				<view class="discount-box">
					<p v-if="item.type ==1" >¥<span class="discount-num">{{item.amount}}</span></p>
					<p v-if="item.type ==2" ><span class="discount-num">{{item.discount/10}}</span>折</p>
					<p class="discount-text">{{item.activity_type ==1 ? "全场通用" : "专属优惠"}}</p>
				</view>
			</view>
			<view class="right-box">
				<p class="title">{{item.title}}</p>
				<p class="sub-title">{{item.sub_title}}</p>
				<p class="time">有效期至{{item.end_time}}</p>
				<view class="goto-btn" @click="getReward(item.reward_no)" v-if="status==1" >立即领取</view>
				<view class="goto-btn" @click="jumpTo(item.jump_link)" v-if="status==2">去使用</view>
			</view>
		</view>
	</view> 
	<view class="empty-status" v-if="rewardList.data.length ==0">
		<view ><img src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/x5j_file/2025-04-14/174462574067fce04cb8017.png" class="img"/></view>
		<view class="note">暂无记录</view>
	</view>
	<modal ref="modal"></modal>
</template>

<script>
	import tabNav from './components/tab-nav.vue'
	export default {
		components: {
			tabNav,
		},
		data() {
			return {
				nav: [{name: '可领取', id:1},{name: '待使用',id: 2},{name: '已使用',id: 3},{name: '已失效',id: 4}],
				idx:0,
				status: 1,
				rewardList: {
					data: [],
					page: 1,
					hasMore: false
				},
				loadStatus: 'more',
			}
		},
		computed: {
			tabTop() {
				return uni.getWindowInfo().statusBarHeight + 48 + 'px'
			},
			headerHeight() {
				return uni.getWindowInfo().statusBarHeight + 88 + 'px'
			}
		},
		onLoad(options) {
			if (options.status) {
				//this.status = options.status;
				this.navTap(options.status-1);
			}else{
				this.getRewardList();
			}
		},
		onReachBottom() {
			if (this.rewardList.hasMore) {
				this.loadStatus = 'loading'
				this.rewardList.page += 1
				this.getRewardList()
			} else {
				this.loadStatus = 'noMore'
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中...',
				mask: true
			})
			this.getRewardList(true)
			setTimeout(() => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}, 800)
		},
		methods: {
             jumpTo(link_url) {
				 var that = this;
				 uni.reLaunch({
				 	url: link_url,
					success() {
						uni.setStorageSync('lastPage', "/pages/mine/reward?status="+that.status)
					}	
				 });
			 },
			// 导航栏点击事件
			navTap(index) {
				this.status = index +1;
				this.idx = index
				this.getRewardList(true)
			},
			// 获取奖励列表
			async getRewardList(refresh = false) {
				const res = await this.$request.get('/api/user/reward_lists',{
					status: this.status,
					page: this.rewardList.page
				},{ load: false })
				if (res.code == 200) {
					this.loadStatus = 'more'
					const list = res.data?.lists || []
					this.rewardList.hasMore = res.data.has_more_page
					if (refresh) {
						this.rewardList.data = list
						this.rewardList.page = 1
					} else {
						this.rewardList.data = this.rewardList.data.concat(list)
					}
				}
			},
			// 领取奖励
			async getReward(reward_no) {
				const res = await this.$request.post('/api/user/get_reward',{
					reward_no: reward_no,
				},{ load: false })
				if (res.code == 200) {
					//领取成功
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					})
					this.getRewardList(true);
				}else{
					uni.showToast({
						title: '领取失败',
						icon: 'error'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.tab-nav {
		// background-color: #fff;
		position: sticky;
		left: 0;
		top: v-bind(tabTop);
		right: 0;
		z-index: 2;
	}
	.header-tab {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		//background: linear-gradient(to right, #CDE0F8, #C3F0F0, #DFF8F0);
		z-index: 2;
		
	}
	.clear-float {
		height: v-bind(headerHeight);
	}
	.reward-item {
		display: flex;
		width: 680rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-top:16rpx;
		
		.left-box{
			display: block;
			position: relative;
			width: 200rpx;
			height: 200rpx;
			float: left;
			overflow: hidden;
			background: #EBFBFA;
			border-radius: 24rpx 0px 0px 24rpx;
			.status-tag{
				width: 124rpx;
				height: 42rpx;
				background: linear-gradient( 90deg, #BBF8F5 0%, #EBFBFA 100%);
				border-radius: 24px 0px 8px 0px;
				font-weight: 400;
				font-size: 12px;
				color: #02ACAF;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.discount-box{
				color:#00CAC0;
				text-align: center;
				width: 100rpx;
				height: 100rpx;
				margin: auto;
				margin-top:28rpx;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 24rpx;
				.discount-num{
					font-weight: 500;
					font-size: 28px;
					line-height: 38rpx;
					font-style: normal;
					text-transform: none;
				}
				.discount-text{
					padding-top:16rpx;
				}
				
			}
		}
		.right-box {
			position: relative;
			width: 480rpx;
			height: 200rpx;
			float: left;
			.title {
				font-weight: 500;
				font-size: 14px;
				color: #262626;
				line-height: 50rpx;
				padding-left: 30rpx;
				padding-top: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none
			}
			.sub-title {
				font-weight: 400;
				font-size: 13px;
				color: #262626;
				line-height: 40rpx;
				text-align: left;
				padding-left: 30rpx;
				font-style: normal;
				text-transform: none;
			}
			.time {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-weight: 400;
				font-size: 13px;
				color: #7B7B7B;
				line-height: 15px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.btn{
				position: absolute;
				top:72rpx;
				right:24rpx;
				font-size: 12px;
				text-align: center;
				color: #FFFFFF;
				width: 64px;
				height: 27px;
				line-height:27px;
				background: linear-gradient( 185deg, #F1E0FF 0%, #4FE3D1 30%, #28D6D6 45%, #08C0CC 92%);
				border-radius: 35px 35px 35px 35px;
				border: 1px solid;
			}
			.goto-btn{
				position: absolute;
				width: 64px;
				height: 27px;
				line-height: 27px;
				text-align: center;
				background: #FFFFFF;
				border-radius: 41px 41px 41px 41px;
				border: 1px solid #00CAC0;
				color:#00CAC0;
				top:72rpx;
				right:24rpx ;
				font-size: 12px;
			}
		}
	}
	
	.reward-item-default {
		display: flex;
		width: 680rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-top:16rpx;
		
		.left-box{
			display: block;
			position: relative;
			width: 200rpx;
			height: 200rpx;
			float: left;
			overflow: hidden;
			background: #EEEEEE;
			color: #999999;
			border-radius: 24rpx 0px 0px 24rpx;
			.status-tag{
				width: 124rpx;
				height: 42rpx;
				background: linear-gradient( 90deg, #DADADA 0%, #EEEEEE 100%);
				border-radius: 24px 0px 0px 0px;
				font-weight: 400;
				font-size: 12px;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.discount-box{
				text-align: center;
				width: 100rpx;
				height: 100rpx;
				margin: auto;
				margin-top:28rpx;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 24rpx;
				.discount-num{
					font-weight: 500;
					font-size: 56rpx;
					line-height: 38rpx;
					font-style: normal;
					text-transform: none;
				}
				.discount-text{
					padding-top:16rpx;
				}
				
			}
		}
		.right-box {
			position: relative;
			width: 480rpx;
			height: 200rpx;
			float: left;
			color: #999999;
			.title {
				font-weight: 500;
				font-size: 14px;
				color: #7B7B7B ;
				line-height: 40rpx;
				padding-left: 30rpx;
				padding-top: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none
			}
			.sub-title {
				font-weight: 400;
				font-size: 13px;
				color: #7B7B7B ;
				line-height: 40rpx;
				text-align: left;
				padding-left: 30rpx;
				font-style: normal;
				text-transform: none;
			}
			.time {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-weight: 400;
				font-size: 13px;
				color: #999999;
				line-height: 15px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.btn{
				position: absolute;
				width: 64px;
				height: 27px;
				line-height: 27px;
				text-align: center;
				background: #FFFFFF;
				border-radius: 41px 41px 41px 41px;
				border: 1px solid #999999;
				top:72rpx;
				right:24rpx ;
				font-size: 12px;
			}
		}
	}
	.empty-status{
		width: 234rpx;
		height: 260rpx;
		margin:  auto;
		margin-top:300rpx;
		.img {
			width: 234rpx;
			height: 190rpx;
		}
		.note{
			width: 234rpx;
			height: 30rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 30rpx;
			text-align: center;
			font-style: normal;
			text-transform: none
		}
	}
</style>